<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="js/echarts.js"></script>
    <%--引入vue的js--%>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <%--引入element的js--%>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="/js/axios.min.js"></script>
    <%--引入elementui的样式--%>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <div id="main" style="width: 600px;height:400px;">

    </div>
</div>

</body>
<script>
    let app=new Vue({
        el:"#app",
        created(){
            this.initEcharts();
        },
        methods:{
            initEcharts(){
                axios.get("/echarts/demo01").then(result=>{
                    console.log(result);
                    // alert(result);
                    var serviceData=[];
                    //把数据封装成Object对象，再封装到数组
                    for (var i=0;i<result.data.xdatas.length;i++){
                        var obj=new Object();
                        obj.value=result.data.ydatas[i];
                        obj.name=result.data.xdatas[i];
                        serviceData[i]=obj;
                    }
                    console.log(serviceData);
                    // alert(serviceData);

                    var myChart = echarts.init(document.getElementById('main'));

                    myChart.setOption({
                        title: {
                            text: '各班级人数',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left'
                        },
                        series: [
                            {
                                name: '班级',
                                type: 'pie',
                                radius: '50%',
                                data: serviceData,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    })
                })
            }
        }
    })
</script>
</html>
